<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>TreeHole留言板</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0 0;
        background: url('/treeHole/img/backgroud.png') no-repeat center center fixed;
        background-size: cover;
        width: 100%; /* 确保容器宽度占满整个视口宽度 */
        min-height: 100vh; /* 确保容器最小高度占满整个视口高度 */
    }
    header h1 {
        color: #333;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    .message-form, .message-list {
        margin-top: 20px;
        width: 800px;
        background: rgba(245, 240, 240, 0.8);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .form-group {
        margin-bottom: 10px;
    }
    .form-group label {
        display: block;
        margin-bottom: 5px;
    }
    .form-group input, .form-group textarea {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    button {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }
    button:hover {
        background-color: #0056b3;
    }
    ul {
        list-style: none;
        padding: 0;
    }
    li {
        margin-bottom: 10px;
        background-color: #f2f2f2;
        padding: 10px;
        border-radius: 5px;
    }

</style>


<div id="app">
    <el-container class="container">
        <el-header>
            <h1>TreeHole留言板</h1>
        </el-header>

        <el-main>
            <el-form class="message-form" @submit.native.prevent="submitMessage">
                <el-form-item label="名字:">
                    <el-input v-model="messageForm.username" required></el-input>
                </el-form-item>
                <el-form-item label="留言:">
                    <el-input type="textarea" v-model="messageForm.content" required></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitMessage">提交留言</el-button>
                </el-form-item>
            </el-form>

            <!-- 使用基础HTML展示留言列表 -->
            <div class="message-list" v-if="messages.length > 0">
                <ul>
                    <li v-for="message in messages" :key="message.id">
                        <h3>{{ message.username }}</h3>
                        <p>{{ message.content }}</p>
                        <p>{{ message.createDate }}</p>
                    </li>
                </ul>
            </div>
        </el-main>
    </el-container>
</div>


<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                messageForm: {
                    username: '',
                    content: ''
                },
                messages: []
            };
        },
        methods: {
            submitMessage() {
                // 这里应该实现提交留言的逻辑，例如使用axios发送POST请求到你的后端API
                console.log("提交留言", this.messageForm);
                axios({
                    method: 'post',
                    url: 'http://localhost:8888/treeHole/message/leaveMessage',
                    data: {
                        username: this.messageForm.username,
                        content: this.messageForm.content
                    }
                }).then(
                    this.fetchMessages()
                );
                // 重置表单
                this.messageForm.username = '';
                this.messageForm.content = '';
            },
            fetchMessages() {
                // 使用axios发送GET请求
                axios.post('http://localhost:8888/treeHole/message/messageList')
                    .then(response => {
                        console.log("获取留言列表成功", response);
                        // 将响应数据赋值给messages以更新页面
                        this.messages = response.data.data;
                    })
                    .catch(error => {
                        console.error("获取留言列表失败", error);
                    });
            }
        },
        mounted() {
            this.fetchMessages();
        }
    });
</script>

</body>
</html>
